import {Component, EventEmitter, OnInit, Output, Input, SimpleChanges} from '@angular/core';
import {Http} from "@angular/http";
import {GetRTDataByKKSCodesService} from '../../../services/get-rtdata-by-kkscodes.service'
import {Router} from "@angular/router";

@Component({
  selector: 'app-group-level-map',
  templateUrl: './group-level-map.component.html',
  styleUrls: ['./group-level-map.component.css']
})

export class GroupLevelMapComponent implements OnInit {
  ngOnChanges(changes: SimpleChanges): void {
    if(changes['startTime'] || changes['endTime']){
      this.drawMap()
    }
  }
  public mapOptions

  constructor(
    private http: Http,
    private getPots:GetRTDataByKKSCodesService,
    private router: Router
  ) { }
  @Input() public startTime:string;
  @Input() public endTime:string;
  getXYCoorById(id:number):number[]{
    switch (id){
      case 4:return [5129,-3601];
      //case 274:return[7612,-7999];
      default :return[0,0]
    }
  }

  ngOnInit() {
    this.drawMap();
  }
  drawMap() {
    this.http.get('assets/data/chinaMap.json').map(res => res.json())
      .subscribe(mapData => {
          this.http.get('assets/data/valueData.json').map(res => res.json())
            .subscribe(valueData => {
                this.getPots.getPowerColum(1,2).subscribe(
                  pots=>{
                    let mappoints:object[]=[]
                    if(pots){
                      pots.forEach((pot)=>{
                        if(pot.capacity!==0){
                          let xy=this.getXYCoorById(pot.id);
                          mappoints.push({
                            name:pot.name,
                            x:xy[0],
                            y:xy[1],
                            properties:{
                              id:pot.id,
                              capa:pot.capacity,
                              power:pot.energy,
                            },
                          })
                        }
                      })
                    }
                    let router=this.router;
                    let startTime = this.startTime;
                    let endTime = this.endTime;
                    this.mapOptions = {
                      chart: {
                        type: 'mappoint',
                      },
                      title: {
                        text: ''
                      },
                      legend: {
                        enabled: false
                      },
                      tooltip:{
                        useHTML: true,
                        headerFormat: '<small>{point.key}</small><table>',
                        pointFormatter:function () {
                          let html
                          if(this.options.hasOwnProperty('properties'))
                            html=`<tr><td>装机容量：</td><td>${(this.options.properties.capa/1000000).toFixed(3)}MW</td></tr>`
                              //+`<tr><td>发电量：</td><td>${(this.options.properties.power/10000).toFixed(3)}万kWh</td></tr>`;
                              +`<tr><td>机组台数：</td><td>100台</td></tr>`;
                          else html=''
                          return html
                        }
                      },
                      credits: {
                        enabled: false
                      },
                      exporting: {
                        enabled: false
                      },
                      colorAxis: {
                        min: 1,
                        max: 100,
                        type: 'linear'
                      },
                      plotOptions:{
                        series: {
                          dataLabels: {
                            enabled: false
                          },
                          cursor:'pointer',
                          point:{
                            events:{
                              click:function () {
                                if(this.hasOwnProperty('properties')&&this.properties.hasOwnProperty('id')){
                                  if(startTime != ''){
                                    router.navigate(['/pages/performance-analysis/regional-overview', this.properties.id, {startTime: startTime,endTime: endTime}])
                                  }else{
                                    router.navigate(['/pages/exhibition/regional-overview', this.properties.id])
                                  }
                                }
                              }
                            }
                          },
                          // marker: {
                          //   symbol:'url(/assets/images/pin.png)',
                          //   width: 30,
                          //   height: 30
                          // }
                        }
                      },
                      series: [{
                        type:'map',
                        data: valueData,
                        mapData: mapData,
                        joinBy: ['hc-key', 'code'],
                        states: {
                          hover: {
                            color: '#a4edba'
                          }
                        },
                        tooltip: {
                          enabled:false
                        }
                      },{
                        data:mappoints
                      }]
                    }
                  },
                  err=>{

                  }
                )
              },
              err => console.log(err))
        },
        err => {

        },
        () => {
        })
  }


}
